import React from 'react';
import styles from './User.less';
import {Table, Tooltip} from 'antd';

const UserList = (props) => {

  const { userList, documentLoading, rowSelection, onEdit, currentPage, pageSize } = props;

  const columns = [
    { title: '序号', width: '5%', render: (text, record, index) => <span>{(index + 1) + currentPage * pageSize}</span> },
    { title: '照片头像', dataIndex: 'photo', key: 'photo', width: '8%', render: (text, record, index) =>
          text ? <img style={{ width: 50, height: 48, margin: "-8px 0px -15px 0px" }} src={text} /> : null
    },
    { title: '用户名', dataIndex: 'user_name', key: 'user_name', width: '15%' },
    { title: '密码', dataIndex: 'password', key: 'password', width: '10%' },
    { title: '手机号码', dataIndex: 'phone_number', key: 'phone_number', width: '10%' },
    { title: '邮箱', dataIndex: 'email', key: 'email', width: '15%', render: (text, record, index) => <span title={text}>{text}</span> },
    { title: '个人简介', dataIndex: 'resume', key: 'resume', width: '17%', render: (text, record, index) => <span title={text}>{text}</span> },
    { title: '创建时间', dataIndex: 'create_time', key: 'create_time', width: '12%' },
    { title: '操作', key: 'operate', width: '10%',
      render: (text, record) => (
      <span style={{padding: "0px 5px 0px 5px"}}>
        <Tooltip title={"编辑"}>
          <a onClick={() => onEdit(record)}>
            <i className="ri-edit-box-fill" style={{color: '#08c', fontSize: "20px"}}></i>
          </a>
        </Tooltip>
      </span>)
  }];

  return (
    <div className={ styles.listTable }>
      <Table
        bordered
        tableLayout={"auto"}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={userList}
        pagination={false}
        loading={documentLoading}
        rowKey={record => record.id}
        scroll={{y: (window.innerHeight - 230)}}
      />
    </div>
  );
};

export default UserList;
